
import React, { Component } from "react";
import { BrowserRouter as Router, Route,  Link, } from "react-router-dom";
import { Layout, Card, Skeleton, Row, Col, Progress, Badge, List} from "antd";
import { Tabs, NoticeBar, NavBar, Icon } from 'antd-mobile';
import '../css/wechatmobile.css';
import moment from 'moment';
import { CheckconditionDataForPatrolpush } from "../js/patrolpushapi.js";
import { InspectConditionDataForInpsectpush } from "../js/inspectpushapi.js";
const echarts = require('echarts');
const { Content, Sider } = Layout;

class WechatTaskRequiry extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        // var useragent = navigator.userAgent;
        // if (useragent.match(/MicroMessenger/i) != 'MicroMessenger' || navigator.userAgent.toLowerCase().indexOf('dingtalk') == -1) {
        //     window.location.href = "wxError.html";//若不是微信浏览器，跳转到温馨error页面
        // }
    }


    render() {
        return (
            <Router basename="wechatsecurityrank">
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Content>
                        <Route path="/" component={WeChatTaskRequiryMain} />
                    </Content>
                </Layout>
            </Router>
        );
    }
}

class WeChatTaskRequiryMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {}

    
    render() {
        const tabs = [
        // { title: '今日巡更', sub: '1' },
        { title: '日巡检进度', sub: '2' },
        { title: '周巡检进度', sub: '3' },
        { title: '月巡检进度', sub: '4' },
        ];
        return (
        <div>
            <Tabs tabs={tabs}
                initialPage={0}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            >
                {/* <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                    <SchoolPatrolpushMain />
                </div> */}
                <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                    <TodaySchoolInspectpushMain />
                </div>
                <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                    <WeekSchoolInspectpushMain />
                </div>
                <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                    <MonthSchoolInspectpushMain />
                </div>
            </Tabs>
        </div>    
        );
      }

}


// class SchoolPatrolpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             data: [],
//             schoolId: 0,
//             should: 0,
//             done: 0,
//             confirmLoading: false,
//             flag:true
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() {
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId = 4;
//         let date = moment().format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date,
//         });

//         CheckconditionDataForPatrolpush(schoolId, date)
//             .then((res2) => {
//                 if(res2.data.data.length==0){
//                     this.setState({
//                         flag:false
//                     });
//                 }else{
//                 //得到整个页面的数据
//                     let dataTemp = []
//                     res2.data.data.forEach((item, index) => {
//                         let temp = {
//                             timePeriod: item.createTime,
//                             people: item.realName,
//                             routeDoneNum: item.routeDoneNum,
//                             symbol: item.symbol,
//                             routeRightNum: item.routeRightNum,
//                             routeName:item.routeName,
//                             routeNameId:item.routeNameId,
//                             routeNum:item.routeNum
//                         };
//                         dataTemp.push(temp);
//                     });
//                     //console.log(dataTemp);
//                     let percent = ((res2.data.done > res2.data.should ? (res2.data.should) : (res2.data.done)) / res2.data.should * 100).toFixed(2);
//                     if (percent == 100) {
//                         percent = Number(percent).toFixed(0);
//                     }

//                     this.setState({
//                         data: dataTemp.reverse(),
//                         routeNum: res2.data.routeNum,
//                         should: res2.data.should,
//                         done: res2.data.done,
//                         percent: percent,
//                         schoolId: res2.data.schoolId,

//                         confirmLoading: false,
//                     });
//                 }
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });

//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         //console.log(percent);
//         let cards = this.state.data.map((d, index) => {
//             console.log(d.routeRightNum);
//             let normative = (d.routeRightNum / d.routeNum * 100).toFixed(2); //打卡规范性(准确率)
//             if (normative == 100) {
//                 normative = Number(normative).toFixed(0);
//             }
//             // ((d.routeDoneNum > 23 ? 23 : d.routeDoneNum) / this.state.routeNum * 100).toFixed(2);
//             let completionRate = (( d.routeDoneNum / d.routeNum ) * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }

//             let data = [{
//                 title: '巡更路线',
//                 description: (<div style={{ color: '#000000' }}>{d.routeName}</div>)
//             }, {
//                 title: '巡更人员',
//                 description: (<div style={{ color: '#000000' }}>{d.people}</div>)
//             }, {
//                 title: '巡更点位',
//                 description: (<div style={{ color: '#000000' }}>{d.routeNum + '个'}</div>)
//             }, {
//                 title: '实际巡更',
//                 description: (<div style={{ color: '#000000' }}>{d.routeDoneNum + '个'}</div>)
//             },
//             {
//                 title: '完成率',
//                 description: (<div style={{ color: '#000000' }}>{completionRate + '%'}</div>)
//             }];

//             return (
//                 <div>
//                     { this.state.flag == true?
//                         (<Link
//                             style={{ textDecoration: 'none' }}
//                             to={{
//                                 pathname: '/detail',
//                                 state: {
//                                     symbol: d.symbol,
//                                     schoolId: this.state.schoolId,
//                                     routeNameId:d.routeNameId,
//                                     completionRate:completionRate
//                                 }
//                             }}>
//                             <Card
//                                 key={index}
//                                 title={d.timePeriod}
//                                 // extra={'详情 >'}
//                                 className='conditionCard'
//                                 style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                                 bodyStyle={{
//                                     padding: '10px 24px',
//                                 }}>
//                                 <Layout>
//                                     <Content style={{ background: '#fff' }}>
//                                         <List
//                                             itemLayout="horizontal"
//                                             style={{ marginRight: 25 }}
//                                             size="small"
//                                             bordered={false}
//                                             split={false}
//                                             dataSource={data}
//                                             renderItem={item => (
//                                                 <List.Item>
//                                                     <Row
//                                                         type="flex"
//                                                         justify="space-between"
//                                                         style={{
//                                                             width: "100%"
//                                                         }}>
//                                                         <Col span={8} xs={10}>
//                                                             {item.title}
//                                                         </Col>
//                                                         <Col
//                                                             // style={{ textAlign: "end" }}
//                                                             span={16} xs={14}>
//                                                             {item.description}
//                                                         </Col>
//                                                     </Row>
//                                                 </List.Item>
//                                             )}
//                                         />
//                                     </Content>
//                                     <Sider width={'25%'} style={{ background: '#fff' }}>
//                                         <Progress
//                                             className='progress-center'
//                                             style={{
//                                                 fontSize: '12px'
//                                             }}
//                                             size='small'
//                                             type="circle"
//                                             percent={normative}
//                                             width={85}
//                                             strokeWidth={8}
//                                             format={percent => `准确率${percent}%`}
//                                         />
//                                     </Sider>
//                                 </Layout>
//                             </Card>
//                         </Link>):null}
//                 </div>
//             )
//         });


//         return (
//             <div>
//                 { this.state.flag == true?
//                     (<div style={{ paddingBottom: '10px' }}>
//                         <Skeleton loading={this.state.confirmLoading} active>
//                             <div
//                                 className='conditionCard'
//                                 style={{
//                                     boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
//                                     textAlign: 'center',
//                                     padding: '12px 24px',
//                                     background: '#ffffff',
//                                 }}>
//                                 <div>
//                                     日期：
//                                     {this.state.date}
//                                 </div>
//                                 <div>
//                                     <Progress
//                                         type="circle"
//                                         percent={this.state.percent}
//                                         width={150}
//                                         strokeWidth={8}
//                                         style={{ marginTop: '10px', fontSize: '28px' }}
//                                         format={percent => `完成率${percent}%`}
//                                     />
//                                 </div>
//                                 <div>
//                                     <Row style={{ marginTop: '10px', }}>
//                                         <Col span={12}>
//                                             <Badge
//                                                 status="success"
//                                                 text={"已巡计划：" + this.state.done + "个"} />
//                                         </Col>
//                                         <Col span={12}>
//                                             <Badge
//                                                 status="error"
//                                                 text={"未巡计划：" + (this.state.should - this.state.done) + "个"} />
//                                         </Col>
//                                     </Row>
//                                 </div>
//                             </div>
//                             <div style={{
//                                 width: '100%',
//                                 marginTop: '10px',
//                             }}>
//                                 {cards}
//                             </div>
//                         </Skeleton>
//                     </div>):(
//                     <div style={{textAlign: 'center', paddingTop:'12.5rem'}}>
//                         <img className="icon" src={require("../img/attention.png")} />
//                         <h4 className="tip">本部门暂无今日巡更计划，请前往后台配置！</h4>
//                     </div>
//                     )}
//             </div>
//         )
//     }

// }

class TodaySchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            date: undefined,
            confirmLoading: false,
            flag: true
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 832;
        let date = moment().format('YYYY-MM-DD');

        this.setState({
            schoolId: schoolId,
            date: date
        });

        InspectConditionDataForInpsectpush(schoolId, date, 'ri')
            .then((res) => {
                //得到上半个页面的数据
                if(res.data.data.length==0){
                    this.setState({
                        flag:false
                    });
                }else{
                    let classData = [];
                    res.data.data.forEach((item, index) => {
                        classData.push({
                            key: index + 1,
                            teamId: parseInt(item.classId),
                            teamName: '日巡检 ' + item.className,
                            teamMates: item.classMates,
                            should: parseInt(item.should), //应巡计划数量
                            real: parseInt(item.real), //完成计划数量
                            abnormal: parseInt(item.abnormal), //发现异常项目数
                        });
                    });
                    this.setState({
                        classData: classData,
                        should: res.data.shouldAllClass, //应巡计划数量
                        real: res.data.realAllClass, //实巡计划数量
                        abnormal: res.data.abnormalAllClass, //异常项目数量
                        done: res.data.doneAllClass, //完成项目数
                        all: res.data.allAllClass, //总项目数
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.real / d.should * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '应巡计划',
                description: (
                    <div className='wechatPushCardDescription'>{d.should}</div>
                )
            }, {
                title: '实际完成',
                description: (
                    <div className='wechatPushCardDescription'>{d.real}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];

            return (
                <div>
                    { this.state.flag == true?
                        (<Link
                            style={{ textDecoration: 'none' }}
                            to={{
                                pathname: '/classinspect',
                                state: {
                                    schoolId: this.state.schoolId,
                                    teamId: d.teamId,
                                    teamName: d.teamName,
                                    teamMates: d.teamMates,
                                    should: d.should,
                                    real: d.real,
                                    abnormal: d.abnormal,
                                }
                            }}>
                            <Card
                                key={index}
                                title={d.teamName}
                                // extra={'详情 >'}
                                className='conditionCard'
                                style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                                bodyStyle={{
                                    padding: '10px 24px',
                                }}>
                                <Layout>
                                    <Content style={{ background: '#fff' }}>
                                        <List
                                            itemLayout="horizontal"
                                            style={{ marginRight: 25 }}
                                            size="small"
                                            bordered={false}
                                            split={false}
                                            dataSource={data}
                                            renderItem={item => (
                                                <List.Item>
                                                    <Row
                                                        type="flex"
                                                        justify="space-between"
                                                        style={{
                                                            width: "100%"
                                                        }}>
                                                        <Col span={8} xs={10}>
                                                            {item.title}
                                                        </Col>
                                                        <Col
                                                            style={{ textAlign: "end" }}
                                                            span={16} xs={14}>
                                                            {item.description}
                                                        </Col>
                                                    </Row>
                                                </List.Item>
                                            )}
                                        />
                                    </Content>
                                    <Sider width={'25%'} style={{ background: '#fff' }}>
                                        <Progress
                                            className='progress-center'
                                            style={{
                                                fontSize: '12px',
                                            }}
                                            size='small'
                                            type="circle"
                                            percent={completionRate}
                                            width={85}
                                            strokeWidth={8}
                                            format={percent => `完成率${percent}%`}
                                        />
                                    </Sider>
                                </Layout>
                            </Card>
                        </Link>):null}
                </div>
            )
        });
        let percent
        if(this.state.should != 0){
            percent = (this.state.real / this.state.should * 100).toFixed(2);
        }else{
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div>
                { this.state.flag == true?
                    (<div style={{ paddingBottom: '10px' }}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期：
                                        {moment().format('YYYY-MM-DD')}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>

                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="processing"
                                                text={"应巡计划：" + this.state.should + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"实际完成：" + this.state.real + "个"} />
                                        </Col>
                                        <Col span={24}>
                                            <Badge
                                                status="warning"
                                                text={"巡检项目数/已完成数/发现隐患数：" +
                                                    this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>):(
                    <div style={{textAlign: 'center', paddingTop:'12.5rem'}}>
                        <img className="icon" src={require("../img/attention.png")} />
                        <h4 className="tip">本部门暂无日巡检计划，请前往后台配置！</h4>
                    </div>
                    )}
            </div>
        )
    }
}

class WeekSchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            date: undefined,
            confirmLoading: false,
            flag:true
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 832 ;
        let date = moment().week(moment().week()).startOf('week').add(5, "days").format('YYYY-MM-DD');

        this.setState({
            schoolId: schoolId,
            date: date,
        });

        InspectConditionDataForInpsectpush(schoolId, date, 'zhou')
            .then((res) => {
                if(res.data.data.length==0){
                    this.setState({
                        flag:false
                    });
                }else{
                    //得到上半个页面的数据
                    let classData = [];
                    res.data.data.forEach((item, index) => {
                        classData.push({
                            key: index + 1,
                            teamId: parseInt(item.classId),
                            teamName: '周巡检 ' + item.className,
                            teamMates: item.classMates,
                            should: parseInt(item.should), //应巡计划数量
                            real: parseInt(item.real), //完成计划数量
                            abnormal: parseInt(item.abnormal), //发现异常项目数
                        });
                    });
                    this.setState({
                        classData: classData,
                        should: res.data.shouldAllClass, //应巡计划数量
                        real: res.data.realAllClass, //实巡计划数量
                        abnormal: res.data.abnormalAllClass, //异常项目数量
                        done: res.data.doneAllClass, //完成项目数
                        all: res.data.allAllClass, //总项目数
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.real / d.should * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '应巡计划',
                description: (
                    <div className='wechatPushCardDescription'>{d.should}</div>
                )
            }, {
                title: '实际完成',
                description: (
                    <div className='wechatPushCardDescription'>{d.real}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];

            return (
                <div>
                    { this.state.flag == true?
                    (<Link
                        style={{ textDecoration: 'none' }}
                        to={{
                            pathname: '/classinspect',
                            state: {
                                schoolId: this.state.schoolId,
                                teamId: d.teamId,
                                teamName: d.teamName,
                                teamMates: d.teamMates,
                                should: d.should,
                                real: d.real,
                                abnormal: d.abnormal,
                            }
                        }}>
                        <Card
                            key={index}
                            title={d.teamName}
                            // extra={'详情 >'}
                            className='conditionCard'
                            style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                            bodyStyle={{
                                padding: '10px 24px',
                            }}>
                            <Layout>
                                <Content style={{ background: '#fff' }}>
                                    <List
                                        itemLayout="horizontal"
                                        style={{ marginRight: 25 }}
                                        size="small"
                                        bordered={false}
                                        split={false}
                                        dataSource={data}
                                        renderItem={item => (
                                            <List.Item>
                                                <Row
                                                    type="flex"
                                                    justify="space-between"
                                                    style={{
                                                        width: "100%"
                                                    }}>
                                                    <Col span={8} xs={10}>
                                                        {item.title}
                                                    </Col>
                                                    <Col
                                                        style={{ textAlign: "end" }}
                                                        span={16} xs={14}>
                                                        {item.description}
                                                    </Col>
                                                </Row>
                                            </List.Item>
                                        )}
                                    />
                                </Content>
                                <Sider width={'25%'} style={{ background: '#fff' }}>
                                    <Progress
                                        className='progress-center'
                                        style={{
                                            fontSize: '12px',
                                        }}
                                        size='small'
                                        type="circle"
                                        percent={completionRate}
                                        width={85}
                                        strokeWidth={8}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </Sider>
                            </Layout>
                        </Card>
                    </Link>):null}
                </div>
            )
        });
        let percent
        if(this.state.should != 0){
            percent = (this.state.real / this.state.should * 100).toFixed(2);
        }else{
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div>
                { this.state.flag == true?
                    (<div style={{ paddingBottom: '10px' }}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期时段：
                                        {(moment().week(moment().week()).startOf('week').add(1, "days").format('YYYY-MM-DD') + " ~ " + moment().format('YYYY-MM-DD'))}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>

                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="processing"
                                                text={"应巡计划：" + this.state.should + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"实际完成：" + this.state.real + "个"} />
                                        </Col>
                                        <Col span={24}>
                                            <Badge
                                                status="warning"
                                                text={"巡检项目数/已完成数/发现隐患数：" +
                                                    this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>):(
                     <div style={{textAlign: 'center', paddingTop:'12.5rem'}}>
                        <img className="icon" src={require("../img/attention.png")} />
                        <h4 className="tip">本部门暂无周巡检计划，请前往后台配置！</h4>
                    </div>
                    )}
            </div>
        )
    }
}

class MonthSchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            date: undefined,
            confirmLoading: false,
            flag: true
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 832 ;
        let date = moment().endOf('month').format('YYYY-MM-DD');

        this.setState({
            schoolId: schoolId,
            date: date,
        });

        InspectConditionDataForInpsectpush(schoolId, date, 'yue')
            .then((res) => {
                if(res.data.data.length==0){
                    this.setState({
                        flag:false
                    });
                }else{
                    //得到上半个页面的数据
                    let classData = [];
                    res.data.data.forEach((item, index) => {
                        classData.push({
                            key: index + 1,
                            teamId: parseInt(item.classId),
                            teamName: '月巡检 ' + item.className,
                            teamMates: item.classMates,
                            should: parseInt(item.should), //应巡计划数量
                            real: parseInt(item.real), //完成计划数量
                            abnormal: parseInt(item.abnormal), //发现异常项目数
                        });
                    });
                    this.setState({
                        classData: classData,
                        should: res.data.shouldAllClass, //应巡计划数量
                        real: res.data.realAllClass, //实巡计划数量
                        abnormal: res.data.abnormalAllClass, //异常项目数量
                        done: res.data.doneAllClass, //完成项目数
                        all: res.data.allAllClass, //总项目数
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.real / d.should * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '应巡计划',
                description: (
                    <div className='wechatPushCardDescription'>{d.should}</div>
                )
            }, {
                title: '实际完成',
                description: (
                    <div className='wechatPushCardDescription'>{d.real}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];
            return ( 
                <div>
                { this.state.flag == true?
                (<Link
                    style={{ textDecoration: 'none' }}
                    to={{
                        pathname: '/classinspect',
                        state: {
                            schoolId: this.state.schoolId,
                            teamId: d.teamId,
                            teamName: d.teamName,
                            teamMates: d.teamMates,
                            should: d.should,
                            real: d.real,
                            abnormal: d.abnormal,
                        }
                    }}>
                    <Card
                        key={index}
                        title={d.teamName}
                        // extra={'详情 >'}
                        className='conditionCard'
                        style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                        bodyStyle={{
                            padding: '10px 24px',
                        }}>
                        <Layout>
                            <Content style={{ background: '#fff' }}>
                                <List
                                    itemLayout="horizontal"
                                    style={{ marginRight: 25 }}
                                    size="small"
                                    bordered={false}
                                    split={false}
                                    dataSource={data}
                                    renderItem={item => (
                                        <List.Item>
                                            <Row
                                                type="flex"
                                                justify="space-between"
                                                style={{
                                                    width: "100%"
                                                }}>
                                                <Col span={8} xs={10}>
                                                    {item.title}
                                                </Col>
                                                <Col
                                                    style={{ textAlign: "end" }}
                                                    span={16} xs={14}>
                                                    {item.description}
                                                </Col>
                                            </Row>
                                        </List.Item>
                                    )}
                                />
                            </Content>
                            <Sider width={'25%'} style={{ background: '#fff' }}>
                                <Progress
                                    className='progress-center'
                                    style={{
                                        fontSize: '12px',
                                    }}
                                    size='small'
                                    type="circle"
                                    percent={completionRate}
                                    width={85}
                                    strokeWidth={8}
                                    format={percent => `完成率${percent}%`}
                                />
                            </Sider>
                        </Layout>
                    </Card>
                </Link>):null}
                </div>
            )
        });
        let percent
        if(this.state.should != 0){
            percent = (this.state.real / this.state.should * 100).toFixed(2);
        }else{
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div>
                { this.state.flag == true?
                    (<div style={{ paddingBottom: '10px' }}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期时段：
                                        {(moment().startOf('month').format('YYYY-MM-DD') + " ~ " + moment().format('YYYY-MM-DD'))}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>

                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="processing"
                                                text={"应巡计划：" + this.state.should + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"实际完成：" + this.state.real + "个"} />
                                        </Col>
                                        <Col span={24}>
                                            <Badge
                                                status="warning"
                                                text={"巡检项目数/已完成数/发现隐患数：" +
                                                    this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>):(
                    <div style={{textAlign: 'center', paddingTop:'12.5rem'}}>
                        <img className="icon" src={require("../img/attention.png")} />
                        <h4 className="tip">本部门暂无月巡检计划，请前往后台配置！</h4>
                    </div>
                    )}
            </div>
        )
    }
}

export default WechatTaskRequiry;